<!-- src/components/RegisterForm.vue -->
<template>
  <div class="title">创建您的健康档案</div>
  <form class="flip-card__form" @submit.prevent="handleRegister">
    <input v-model="registerForm.firstName" class="flip-card__input" placeholder="姓名" type="text" required>
    <input v-model="registerForm.email" class="flip-card__input" placeholder="邮箱" type="email" required>
    <div class="password-wrapper">
      <input v-model="registerForm.password" class="flip-card__input" placeholder="密码" :type="showRegisterPassword ? 'text' : 'password'" required>
      <button type="button" class="eye-button" @click="showRegisterPassword = !showRegisterPassword">
        {{ showRegisterPassword ? '👁️' : '👁️‍🗨️' }}
      </button>
    </div>
    <div class="form-group">
      <label>出生日期</label>
      <input v-model="registerForm.dateOfBirth" class="flip-card__input" type="date" required>
    </div>
    <div class="form-group-grid">
      <div class="form-group">
        <label>身高 (cm)</label>
        <input v-model.number="registerForm.heightCm" class="flip-card__input" type="number" min="0" required>
      </div>
      <div class="form-group">
        <label>体重 (kg)</label>
        <input v-model.number="registerForm.initialWeightKg" class="flip-card__input" type="number" min="0" required>
      </div>
    </div>
    <div class="form-group">
      <label>性别</label>
      <select v-model="registerForm.gender" class="flip-card__input" required>
        <option :value="null" disabled>-- 请选择 --</option>
        <option v-for="option in genderOptions" :key="option.value" :value="option.value">{{ option.label }}</option>
      </select>
    </div>
    <div class="form-group">
      <label>主要健康目标</label>
      <select v-model="registerForm.healthGoal" class="flip-card__input" required>
        <option :value="null" disabled>-- 请选择 --</option>
        <option v-for="option in healthGoalOptions" :key="option.value" :value="option.value">{{ option.label }}</option>
      </select>
    </div>
    <div class="form-group">
      <label>日常活动水平</label>
      <select v-model="registerForm.activityLevel" class="flip-card__input" required>
        <option :value="null" disabled>-- 请选择 --</option>
        <option v-for="option in activityLevelOptions" :key="option.value" :value="option.value">{{ option.label }}</option>
      </select>
    </div>
    <button class="flip-card__btn" type="submit" :disabled="loading">
      {{ loading ? '创建档案...' : '创建档案并登录' }}
    </button>
  </form>
</template>

<script setup>
import { reactive, ref, defineEmits } from 'vue';
import { useRouter } from 'vue-router';
import Request from '../utils/Request.js';
import { setToken } from '../utils/Storage.js';
import { useNotificationStore } from '@/stores/notification.js';

const emit = defineEmits(['update:loading', 'registrationSuccess']);
const router = useRouter();
const notificationStore = useNotificationStore();

const showRegisterPassword = ref(false);
const loading = ref(false);

const registerForm = reactive({
  firstName: '',
  email: '',
  password: '',
  dateOfBirth: '',
  gender: null,
  heightCm: null,
  initialWeightKg: null,
  healthGoal: null,
  activityLevel: null,
});

const genderOptions = [{ label: '男', value: 0 }, { label: '女', value: 1 }];
const healthGoalOptions = [{ label: '减脂', value: 0 }, { label: '增肌', value: 1 }, { label: '保持健康', value: 2 }];
const activityLevelOptions = [
  { label: '久坐', value: 0 }, { label: '轻度活跃', value: 1 }, { label: '中度活跃', value: 2 },
  { label: '非常活跃', value: 3 }, { label: '极度活跃', value: 4 }
];

const handleRegister = async () => {
  for (const key in registerForm) {
    if (registerForm[key] === '' || registerForm[key] === null) {
      notificationStore.warning('请填写所有必填的注册信息！');
      return;
    }
  }

  loading.value = true;
  emit('update:loading', true);
  Request.postWithoutToken('/users/register', registerForm)
      .then(response => {
        const { data: registerResult } = response;
        if (registerResult && registerResult.token) {
          setToken(registerResult.token);
          notificationStore.success('注册成功！已为您自动登录。');
          router.push({ name: 'Dashboard' });
        } else {
          notificationStore.success('注册成功！请使用新账户登录。');
          emit('registrationSuccess');
        }
      })
      .catch(error => {
        console.error('注册失败:', error);
      })
      .finally(() => {
        loading.value = false;
        emit('update:loading', false);
      });
};
</script>

<style scoped>
/* 这些样式是注册表单独有的，所以放在这里 */
.flip-card__form .form-group {
  width: 100%;
  text-align: left;
}
.flip-card__form .form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--font-color-sub);
  font-weight: 500;
}
.form-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  width: 100%;
}
</style>